<!DOCTYPE html><html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SoundShare</title>
	<link rel="icon" sizes="32x32" href="sound_share.png" type="image/png">
	<link rel="stylesheet" href="sound_share.css">
</head>
<body>
	<div class="container">
		<h1>SoundShare</h1>
		<p><b>Client ID: </b><span id="clientId"></span></p>
		<p>
			<button id="start" disabled>Start</button>
			<button id="stop" style="display: none" onclick="stop()">Stop</button>
		</p>
		<div id="error" style="display: none"></div>
		<div id="media" style="display: none">
			<audio id="audio" autoplay playsinline></audio>
		</div>
	</div>
	<div class="keys">
		<button id="VK_VOLUME_MUTE" style="display: none">Mute</button>
		<button id="VK_VOLUME_DOWN" style="display: none">Vol-</button>
		<button id="VK_VOLUME_UP" style="display: none">Vol+</button>
	</div>
	<div class="keys">
		<button id="VK_MEDIA_PREV_TRACK" style="display: none">∣◀</button>
		<button id="VK_MEDIA_PLAY_PAUSE" style="display: none">‖</button>
		<button id="VK_MEDIA_NEXT_TRACK" style="display: none">▶∣</button>
		<button id="VK_MEDIA_STOP" style="display: none">■</button>
	</div>
	<h2>Advanced</h2>
	<div id="channel" class="advanced">
		<div><input type="radio" id="only_left" name="channel" value="only_left" onchange="bugNote()" /><label for="only_left">Left Channel</label></div>
		<div><input type="radio" id="stereo" name="channel" value="stereo" checked /><label for="stereo">Stereo</label></div>
		<div><input type="radio" id="only_right" name="channel" value="only_right" onchange="bugNote()" /><label for="only_right">Right Channel</label></div>
	</div>
	<script>
	function bugNote() {
		alert("Note: Some browsers don't support this function!")
	}
	</script>
	<script src="sound_share.js"></script>
</body>
</html>
